<!--
 * @Author: chenxiao
 * @Date: 2022-02-09 10:52:41
 * @LastEditors: chenxiao
 * @LastEditTime: 2022-05-16 14:53:45
-->
<template>
  <div id="box" v-show="chooseTimeStatus2">
    <div class="popup">
      <div style="width:100%;" class="select-time-box">
        <div class="theHead">
          <span class="theTitle">时间选择</span>
          <x-icon @click="closeX" type="ios-close-empty" size="30"></x-icon>
        </div>
        <div class="theDateCon">
          <div class="dateSty" @click="getDate(1)">
            {{ startDateShow }}
          </div>
          至
          <div class="dateSty" @click="getDate(2)">
            {{ endDateShow }}
          </div>
        </div>
        <div @click="affirm" class="sureBtn">确认</div>
      </div>
      <div v-if="dataChooseFlag" class="date-time-box">
        <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="sureDate"
            @cancel="dataChooseFlag = false"
            show-toolbar
          />
      </div>     
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    startDate: {},
    endDate: {},
    chooseTimeStatus: {}
  },
  data () {
    return {
      chooseTimeStatus2: false,
      dataChooseFlag: false,
      // 时间选择框选择的值（1为开始时间，2为结束时间）
      dateIndex: 1,
      // 时间选择值
      currentDate: '',
      startDateShow: '',
      endDateShow: '',
      // 设置时间选择可选取间
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(new Date().getTime() - 24 * 60 * 60 * 1000),
      sdhm: '',
      edhm: '',
      begintime3: '',
      begintime4: '',
      show: false,
      showDialog: false
    }
  },
  watch: {
    startDate: {
      handler(newval, oldval) {
        this.startDateShow = newval;
      }
    },
    endDate: {
      handler(newval, oldval) {
        this.endDateShow = newval;
      }
    },
    chooseTimeStatus: {
      handler(newval, oldval) {
        this.chooseTimeStatus2 = newval
      }
    }
  },
  mounted () {
    this.startDateShow = this.startDate
    this.endDateShow = this.endDate
  },
  methods: {
    // 打开时间选择框
    getDate (flag) {
      this.dateIndex = flag
      if (flag == 1) {
        this.maxDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
        this.minDate = new Date(2021, 0, 1)
      } else {
        // this.minDate = this.currentDateFun(this.startDateShow)
      }
      setTimeout(() => {
        if (flag == 1) {
          this.currentDate = this.currentDateFun(this.startDateShow);
          this.dataChooseFlag = true
        } else {
          this.currentDate = this.currentDateFun(this.endDateShow);
          this.dataChooseFlag = true
        }
      }, 10)
    },
    currentDateFun (str) {
      let time = str.split('-')
      let end = new Date(time[0], time[1] - 1, time[2])
      return end
    },
    // 时间格式化处理
    dateToFormat (date, type) {
      return (
        date.getFullYear() +
        type +
        (date.getMonth() >= 9
          ? date.getMonth() + 1
          : '0' + (date.getMonth() + 1)) +
        type +
        (date.getDate() > 9 ? date.getDate() : '0' + date.getDate())
      )
    },
    // 所需数据处理
    theDateFormat (date, flag) {
      // date = new Date(date).getTime()
      // alert(date);
      // flag: 0全部处理 1开始时间 2结束时间
      if (flag == 1) {
        this.sdhm = this.dateToFormat(date, '')
        this.startDateShow = this.dateToFormat(date, '-')
      } else {
        this.edhm = this.dateToFormat(date, '')
        this.endDateShow = this.dateToFormat(date, '-')
      }
    },
    // 时间选择按钮
    sureDate () {
      this.theDateFormat(this.currentDate, this.dateIndex)
      // if (this.dateIndex == 1) {
      //   this.maxDate =
      //     this.currentDateFun(this.startDateShow).getTime() +
      //       30 * 24 * 60 * 60 * 1000 >
      //     new Date().getTime() - 24 * 60 * 60 * 1000
      //       ? new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
      //       : new Date(
      //           this.currentDateFun(this.startDateShow).getTime() +
      //             30 * 24 * 60 * 60 * 1000
      //         );
      // }
      this.dataChooseFlag = false
    },
    closeX () {
      this.$emit('closeTimechoose', {})
    },
    // 时间选择确认按钮
    affirm () {

      let startYear = this.startDateShow.split('-')[0];
      let endYear = this.endDateShow.split('-')[0];
      if (startYear !== endYear) {
        this.$alertShow('不可跨年查询');
        return;
      }
      if (
        this.currentDateFun(this.startDateShow).getTime() >
        this.currentDateFun(this.endDateShow).getTime()
      ) {
        this.$alertShow('开始时间不能大于结束时间')
      }
      // else if (
      //   this.currentDateFun(this.startDateShow).getTime() + 30 * 24 * 60 * 60 * 1000 <
      //   this.currentDateFun(this.endDateShow).getTime()
      // ) {
      //   this.$alertShow("数据选取范围最大为31天");
      // }
      else {
        this.begintime3 = new Date().getTime()
        this.begintime4 = new Date(
          this.$moment().format('YYYY-MM-DD 08:00:00')
        ).getTime()
        // let time = Date.now() - 24 * 60 * 60 * 1000 - 24 * 60 * 60 * 1000;
        // let yesterday2 = new Date(time);
        // this.theDateFormat(yesterday2, yesterday2);
        if (this.begintime3 < this.begintime4) {
          // this.show = true;
          // this.$alertShow('每日8:00后更新昨日数据');
        }
        this.$emit('qingfenChangeTime', {
          startDate: this.startDateShow,
          endDate: this.endDateShow,
          show: this.show
        })
      }
    }
  }
}
</script>
<style scoped lang='less'>
#box {
  font-size: 0.28rem;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #333333;
  font-weight: 400;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  .popup {
    height: 100%;
    // border: 1px solid red;
    width: 100%;
    position: relative;
    .select-time-box {
      width: 100%;
      background: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .date-time-box {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      min-height: 40%;
    }
  }
  .theHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;
    .theTitle {
      color: #565656;
      font-size: 0.28rem;
      padding: 0.2rem;
    }
  }
  .theDateCon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0.3rem;
    .dateSty {
      width: 2.5rem;
      padding: 0.15rem 0;
      background-color: #f3f3f3;
      text-align: center;
      border-radius: 0.08rem;
    }
  }
  .sureBtn {
    width: 95%;
    text-align: center;
    color: #ffffff;
    background: #4570a9;
    margin: 0.6rem auto;
    padding: 0.15rem 0;
    border-radius: 0.08rem;
  }
}
</style>
